<template>
  <n-form
		ref="formRef"
		:model="wyform"
		:rules="rules"
		label-placement="left"
		label-width="auto"
		require-mark-placement="right-hanging"
		size="small">
		<n-form-item label="班级名称" path="name" >
		 <n-input v-model:value="wyform.name" type="text" placeholder="请输入班级名称" />
		</n-form-item>
		<n-form-item label="班级简称" path="subName">
			<n-input v-model:value="wyform.subName" placeholder="请输入班级简称" />
		</n-form-item>
		<n-form-item label="教室" path="room">
			<n-input v-model:value="wyform.room" placeholder="请输入教室" />
		</n-form-item>
		<n-form-item label="开始时间" path="startDate">
			<n-date-picker value-format="yyyy-MM-dd" v-model:formatted-value="wyform.startDate" type="date" placeholder="请选择开始时间" />
		</n-form-item>
		<n-form-item label="结束时间" path="endDate">
			<n-date-picker value-format="yyyy-MM-dd" v-model:formatted-value="wyform.endDate" type="date" placeholder="请选择结束时间" />
		</n-form-item>
		<n-form-item>
			<n-button type="primary" @click="save">保存</n-button>
		</n-form-item>
	</n-form>
</template>

<script setup>
import { add, getInfo, update } from '@/api/gradeApi'
const emits = defineEmits(['update:show', 'getTableData'])
const props = defineProps(['id'])

const formRef = ref()
const value = ref(null)
const wyform = reactive({
	name: '',
	subName: '',
	room: '',
	startDate: null,
	endDate: null
})
if (props.id && process.client) {
	getInfo(props.id, content => {
		wyform.id = content.id
		wyform.name = content.name
		wyform.subName = content.subName
		wyform.room = content.room
		wyform.startDate = content.startDate
		wyform.endDate = content.endDate
	})
}
const rules = reactive({
	name: [
		{
			required: true,
			message: '请输入班级名称',
			trigger: 'blur'
		}
	],
	subName: [
		{
			required: true,
			message: '请输入班级简称',
			trigger: 'blur'
		}
	],
	room: [
		{
			required: true,
			message: '请输入教室',
			trigger: 'blur'
		}
	],
	startDate: [
		{
			required: true,
			message: '请选择开始时间',
			trigger: 'blur'
		}
	],
	endDate: [
		{
			required: true,
			message: '请选择结束时间',
			trigger: 'blur'
		}
	]
})
function save () {
	const methodName = props.id ? update : add
	methodName(wyform, content => {
		emits('update:show', false)
		emits('getTableData')
	}, formRef)
}
</script>

<style scoped lang="scss">
.n-date-picker {
	width: 100%;
}
</style>